<template>
  <div class="customerrecorddetails">
    <div class="top111">
      <img @click="fanhui" src="../assets/总图标包含整个系统的/fanhui.png" />
      <span>拜访详情</span>
      <img
        class="imgwid"
        src="../assets/总图标包含整个系统的/fanhuishouye.png"
        @click="fanhuiin()"
      />
    </div>
    <div class="topx">
      <img src="../assets/总图标包含整个系统的/头像.png" />
      <div>
        <p>{{ arr.custName }}</p>
        <p class="ptwo">录入人: 罗某人</p>
      </div>
    </div>
    <div class="content">
      <div class="top">
        <img src="../assets/总图标包含整个系统的/基本信息.png" />
        <h4>基本信息</h4>
      </div>
      <div class="textx">
        <span>拜访标题</span>
        <p>{{ arr.visitTitle }}</p>
      </div>
      <div class="textx">
        <span>拜访时间</span>
        <p>{{ arr.visitTime.slice(0, 10) }}</p>
      </div>
      <div class="textx">
        <span>拜访地址</span>
        <p>{{ arr.visitAddress }}</p>
      </div>
      <div class="textx">
        <span>拜访原因</span>
        <p>{{ arr.visitReason }}</p>
      </div>
      <div class="textx">
        <span>拜访情况</span>
        <p>{{ arr.visitSituation }}</p>
      </div>
      <div class="textx">
        <span>竞争信息收集情况</span>
        <p>{{ arr.collectSituation }}</p>
      </div>
      <div class="textx">
        <span>创建时间</span>
        <p>{{ arr.createTime }}</p>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      arr: [],
    };
  },
  methods: {
    fanhui() {
      this.$router.go(-1);
    },
    fanhuiin() {
      this.$router.push("/index");
    },
  },
  created() {
    this.$route.params.itme;
    this.arr = this.$route.params.itme;
    // console.log(this.arr);
  },
};
</script>
 
<style lang = "less" scoped>
.customerrecorddetails {
  width: 100vw;
  height: 100vh;
  background-color: #f5f5f5;
  background: url("https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2800188753,1941502220&fm=26&gp=0.jpg")
      no-repeat,
    url("../assets/总图标包含整个系统的/底纹.png") center bottom no-repeat;
  background-size: 100%;
  .topx {
    display: flex;
    align-items: center;
    margin-top: 30px;
    margin-left: 10px;
    img {
      width: 60px;
      margin-right: 10px;
    }
    div {
      color: #fff;
      p {
        font-size: 18px;
      }
      .ptwo {
        font-size: 14px;
        margin-top: 5px;
      }
    }
  }
  .content {
    width: 90%;
    margin: auto;
    background-color: #fff;
    padding: 10px;
    margin-top: 30px;
    border-radius: 5px;
    .top {
      display: flex;
      align-items: center;
      padding-bottom: 10px;
      border-bottom: 1px solid #f5f5f5;
      margin-bottom: 10px;
      img {
        width: 20px;
        margin-right: 10px;
      }
    }
    .textx {
      display: flex;
      align-items: center;
      margin-top: 15px;
      span {
        width: 20%;
        margin-right: 10px;
        color: #ccc;
      }
    }
  }
}
.top111 {
  background-color: #023293;
  display: flex;
  justify-content: space-between;
  color: #fff;
  align-items: center;
  padding: 10px;
  img {
    width: 10px;
  }
  .imgwid {
    width: 20px;
  }
}
</style>